<template>
  <div class="zl-config">
    <div class="right-row">
      <div class="r-tit">显示边框</div>
      <div class="r-cnt r-check">
        <Checkbox v-model="graphOptions.others.border" label="" @on-change="handleChangeBorder"></Checkbox>
      </div>
    </div>
    <div class="right-row">
      <div class="r-tit">边框颜色</div>
      <div class="r-cnt">
        <ColorPicker v-model="graphOptions.others.borderColor" :alpha="true"></ColorPicker>
      </div>
    </div>
    <div class="right-row">
      <div class="r-tit">是否滚动</div>
      <div class="r-cnt r-check">
        <Checkbox v-model="graphOptions.others.animate" label="" @on-change="handleChangeScroll"></Checkbox>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
    }
  },
  props: {
    graphOptions: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    handleChangeBorder(val) {
    	this.$emit('changeGraphOptions', 'others', {border: val})
    },
    handleChangeScroll(val) {
    	this.$emit('changeGraphOptions', 'others', {animate: val})
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
